<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线预定</title>
		<link href="/css/styleShibanhe.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<style>
			.content{min-width: 1300px;overflow-x:auto;}
			.banner{width: 100%;height: 484px;background: url(/img/banner2.png) no-repeat center center;background-size: 1920px 100%;position: relative;}
			.bannerArea{width: 1190px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 60px;text-align: right;z-index: 2;}
			.bannerArea p{font-size: 35px;color: #fff;line-height: 1.4;font-weight: 200;text-transform:uppercase;}
			.nav{width: 100%;height: 48px;background: url(/img/nav.png) no-repeat center center;background-size: 1920px 48px;}
			.nav p{width: 1260px;margin: 0 auto;display: flex;align-items: center;height: 48px;color: #000000;}
			.nav p img{margin-right: 10px;}
			
			.main{width: 100%;background: url(/img/back3.png) no-repeat;background-size: 1920px 1434px;background-position: center bottom;padding-top: 1px;}
			.order{width: 1260px;margin: 70px auto 85px;background: rgba(255,255,255,0.5);padding: 85px 0 55px;}
			.orderP1{font-size: 28px;color: #000000;line-height: 1;text-align: center;}
			.orderP2{font-size: 14px;color: #000000;line-height: 1.5;text-align: center;text-transform:uppercase;opacity: 0.5;}
			.orderInfo{width: 486px;margin: 40px auto 22px;}
			.inputBox{height: 39px;background: url(/img/border.png) no-repeat;margin-bottom: 15px;padding: 0 15px;display: flex;align-items: center;font-size: 16px;color: #000000;}
			.inputBox span{width: 95px;}
			.inputBox em{margin-left: 2em;font-style: normal;}
			.inputBox input{width: calc(100% - 95px);border: none;background: none;height: 39px;outline: none;font-size: 16px;}
			.pay{margin-bottom: 14px;}
			.result{margin: 40px auto 0;display: block;}
			.payChange label{display: inline-flex;align-items: center;margin-right: 35px;}
			.payChange label img{margin-left: 10px;}
			.language{position: absolute;top:30px;right: 30px;font-size: 12px;z-index: 222}
			.language span{margin: 0 3px;color: #ccc;}
			.language .cur{color: #fff;}
			.nav a{color: black}
			.selectBox{height: 39px;display: flex;align-items: center;font-size: 16px;color: #000000;margin-bottom: 15px;}
			.selectBox label{display: inline-flex;align-items: center;margin-right: 35px;height: 39px;}
			.selectBox input{margin-right: 10px;}
		</style>
		<script src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
		<div class="content" id="cover">
			<div class="banner">
				<div class="language">
					<span class="cur">中文</span>
					<span>English</span>
					<span>日本語</span>
					<span>한국어</span>
				</div>
				<div class="head">
					<div class="headLeft cur">
						<a href="/">网站首页</a>
					</div>
					<div class="headLeft">
						<a href="/walking">走进景区</a>
					</div>
					<div class="headLeft">
						<a href="/impression">印象景区</a>
					</div>
					<div class="headLeft">
						<a href="/play">玩转景区</a>
					</div>
					<img class="logo" src="/img/logo.jpg" style="width:180px;height:172px"/>
					<div class="headRight">
						<a href="/shopping">景区周边</a>
					</div>
					<div class="headRight">
						<a href="/dynamic">景区动态</a>
					</div>
					<div class="headRight">
						<a href="/strategy">旅游攻略</a>
					</div>
					<div class="headRight">
						<a href="/service">客户服务</a>
					</div>
				</div>
				<div class="bannerArea">
					<p>> 客户服务</p>
					<p>customer service</p>
				</div>
			</div>
		
			<div class="nav">
				<p><img src="/img/location.png"/>您的位置：<a href="/">网站首页&nbsp;></a>&nbsp;<a href="/service">客户服务&nbsp;></a>&nbsp;<a href="#" class="siteChange">在线预定</a></p>
			</div>
		
			<div class="main">
				<div class="order">
					<p class="orderP1">确认订单</p>
					<p class="orderP2">Confirm Order</p>
					<form class="orderInfo" id="signupForm">
						<div class="selectBox">
							<span>&nbsp;&nbsp;订单服务：</span>
							<label>
								<input class="inputType" checked type="radio" name="typeId"  typeId="1" />
								个人取票
							</label>
							<label>
								<input class="inputType" type="radio" name="typeId"  typeId="2" />
								团体取票
							</label>
							<input type="hidden" id="orderType" name="orderType" >
						</div>
						<div class="inputBox">
							<span>票<em>数：</em></span>
							<input type="text" name="votesNum" maxlength="6" id="votesNum" placeholder="请填写票数 如: 3" />
						</div>
						<div class="inputBox">
							<span>票<em>价：</em></span>
							<input type="text" name="payMoney" maxlength="6" value="2" id="payMoney" readonly />
						</div>
						<div class="inputBox">
							<span>取票日期：</span>
							<input type="text" id="ticketTime" class="Wdate" name="ticketTime" readonly onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" placeholder="请选择取票日期" />
						</div>
						<div class="inputBox">
							<span>预定说明：</span>
							<input type="text" id="getIntruduce" maxlength="200" name="getIntruduce"  placeholder="请填写预定说明" />
						</div>
						<div class="inputBox">
							<span>您的姓名：</span>
							<input type="text" id="name" maxlength="20" name="name"  placeholder="请填写您的姓名" />
						</div>
						<div class="selectBox">
							<span>&nbsp;&nbsp;您的性别：</span>
							<label>
								<input class="inputSex" checked type="radio" name="sexId"  sexId="1" />
								男
							</label>
							<label>
								<input class="inputSex" type="radio" name="sexId"  sexId="2" />
								女
							</label>
							<input type="hidden" id="sex" name="sex" >
						</div>
						<div class="inputBox">
							<span>通讯地址：</span>
							<input type="text" id="address" maxlength="100" name="address" placeholder="请填写通讯地址" />
						</div>
						<div class="inputBox">
							<span>身份证号：</span>
							<input type="text" id="idCard" maxlength="18" name="idCard" placeholder="请填写身份证号" />
						</div>
						<div class="inputBox">
							<span>联系电话：</span>
							<input type="text" id="phone" maxlength="11" name="phone" placeholder="请填写联系电话" />
						</div>
						<img class="pay" src="/img/pay.png" />
						<div class="payChange selectBox">
							<label>
								<input class="inputPay" checked type="radio" name="payId" payId="2" />
								<img src="/img/weixin.png"  />
							</label>
							<label>
								<input class="inputPay" type="radio" name="payId" payId="1" />
								<img src="/img/alpay.png" />
							</label>
							<input type="hidden" id="payType" name="payType" >
						</div>
						<img class="result" src="/img/result.png" />
					</form>
					</div>

				</div>
				
				
				
				<div class="footer">
					<div class="footerTop">
						<span id="link">友情链接：</span>
						<!--<a href="#"><img src="/img/icon2.png" /></a>-->
					</div>
					<ul class="footUl">
						<li><a href="/">网站首页</a></li>
						<li><a href="/walking">走进石板河</a></li>
						<li><a href="/impression">印象石板河</a></li>
						<li><a href="/play">玩转石板河</a></li>
						<li><a href="/surrounding">景区导览</a></li>
						<li><a href="/dynamic">景区动态</a></li>
						<li><a href="/strategy">旅游攻略</a></li>
						<li><a href="/service.html">客户服务</a></li>
					</ul>
					<p>安徽省石板河旅游发展有限公司　版权所有　 Copyright © 2020 All Right Reserve　</p>	
					<p>免责申明　皖公网安备 34018102340321号</p>
					<p>技术支持：徽章纵视</p>
				</div>
			</div>
		</div>
		<div class="payPosition" style="width: 100%;height: 100%;position: fixed;top: 0;left: 600px;display: flex;align-items: center;justify-content: center;z-index: 1111;display: none;">
			<img src="/img/payMethod.jpg" />
		</div>

		<script>
			$("#votesNum").blur(function(){
				var votesNum = $("#votesNum").val();
				var n1 = /^[0-9]*$/;
				var re = new RegExp(n1);
				if (!re.test(votesNum)){
					alert('票数请填写数字')
					return false
				}
				var payMoney = $("#payMoney").val();
				$("#payMoney").val(parseInt(votesNum)*parseInt(payMoney))
			});


			$(".result").click(function(){
				var orderType = $(".inputType:checked").attr('typeId');
				$("#orderType").val(orderType);
				var votesNum = $("#votesNum").val();
				if(votesNum == ''){
					alert('请填写票数')
					return false
				}
				var n1 = /^[0-9]*$/;
				var re = new RegExp(n1);
				if (!re.test(votesNum)){
					alert('票数请填写数字')
					return false
				}
				var ticketTime = $("#ticketTime").val();
				if(ticketTime == ''){
					alert('请填写取票日期')
					return false
				}
				var getIntruduce = $("#getIntruduce").val();
				if(getIntruduce == ''){
					alert('请填写预定说明')
					return false
				}
				var name = $("#name").val();
				if(name == ''){
					alert('请填写您的姓名')
					return false
				}

				var address = $("#address").val();
				if(address == ''){
					alert('请填写通讯地址')
					return false
				}
				var idCard = $("#idCard").val();
				if(idCard == ''){
					alert('请填写身份证号')
					return false
				}
				var n2 =
						/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				var re = new RegExp(n2);
				if (!re.test(idCard)){
					alert('请填写正确的身份证号')
					return false
				}
				var phone = $("#phone").val();
				if(phone == ''){
					alert('请填写联系电话')
					return false
				}
				var n3 = /^1[3|4|5|8][0-9]\d{4,8}$/;
				var re = new RegExp(n3);
				if (!re.test(phone)){
					alert('请填写正确的手机号')
					return false
				}
				var sex = $(".inputSex:checked").attr('sexId')
				$("#sex").val(sex);


				var payType = $(".inputPay:checked").attr('payId')
				$("#payType").val(payType);

				if(parseInt(payType)==1){
					$.ajax({
						type : "post",
						url :  "/alipay/saveOrder",
						data : $('#signupForm').serialize(),
						async : false,
						success : function(data) {
							if(data != null && data != '') {
								if(data.code==0){
									window.location.href="/alipay/get_qr_code?orderNo="+data.orderNo+"&totalAmount="+data.totalAmount
								}
							}
						}
					});
				}else {
					$.ajax({
						type : "post",
						url :  "/wechat/weixinPay",
						data : $('#signupForm').serialize(),
						async : false,
						success : function(data) {
							if(data != null && data != '') {
							}
						}
					});
				}
				//$(".payPosition").show();
			})

			$(".payPosition").click(function(){
				$(this).hide()
				$("#cover").css("opacity","1");
			})

			$().ready(function() {


				$.ajax({
					type : "POST",
					url :  "/system/link/linkList",
					async : false,
					success : function(data) {
						if(data != null && data != '') {
							if(data.code==0){
								var div=""
								for (var i=0;i<data.linkList.length;i++){
									div+="<a href='"+data.linkList[i].linkUrl+"'>";
									$.ajax({
										type : "POST",
										url :  "/common/sysFile/list",
										data : {attachId:data.linkList[i].attachId},
										async : false,
										success : function(data) {
											if(data != null && data != '') {
												div+="<img src='"+data[0].fileUrl+"' /></a>"
											}
										}
									});
								}
								$("#link").after(div)
							}
						}
					}
				});

				$.ajax({
					type : "GET",
					url :  "/sys/sysSet/getSet",
					data : {type:''},
					async : false,
					success : function(data) {
						if(data != null && data != '') {
							if(data.code==0){
								var setDOList=data.setDOList
								for (var i=0;i<setDOList.length;i++){
									$("#"+setDOList[i].setCode).text(setDOList[i].setValue)
								}
							}
						}
					}
				});

			});
		</script>
	</body>
</html>

